<template>
    <div>
        <div class="hero-nav nav jc-around pb-2 p-3 bg-white">
            <div class="nav-item pb-2" 
            v-for="(category,index) in Cats" :key="index"
            :class="{active:index === currentIndex}"
            @click="$refs.list.swiper.slideTo(index)">
                <div class="nav-link">{{category}}</div>
            </div>
        </div>
        <swiper ref="list"  :options="{autoHeight:true}"
        @slide-change = "currentIndex = $refs.list.swiper.realIndex">
            <swiper-slide>
                <slot name="page1"></slot>
            </swiper-slide>
            <swiper-slide>
                <slot name="page2"></slot>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                Cats:['英雄初识','进阶攻略'],
                currentIndex:0
            }
        }
    }
</script>

<style lang="scss">
    @import 'assets/scss/_variables.scss';
    .hero-nav{
        border-bottom: 1px solid $border-color;
    }
</style>